<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:RollingTop>
      <z-tab
        v-model:active="tabActive"
        :tabList="tabList"
        top="13"
        @click-tab="setActive"
        :border="false"
      ></z-tab>
     <div v-show="tabActive == 2"><TimeChange @select="onSelectTimeChange"></TimeChange></div>
     <div style="height: 10px;" v-show="tabActive != 2"></div>
    </template>
    <template v-slot:extension>
      
    </template>
      <div class="record-container">
        
        <div class="records-container-all">
          <div class="records-all-left">
            <div class="all-item-upper">{{ sumShow.TableTwo }}</div>
            <div class="all-item-below">2人桌 (次)</div>
          </div>
          <div class="records-all-center">
            <div class="all-item-upper">{{ sumShow.TableFour }}</div>
            <div class="all-item-below">4人桌 (次)</div>
          </div>
          <div class="records-all-right">
            <div class="all-item-upper">{{ sumShow.TableMore }}</div>
            <div class="all-item-below">4人以上 (次)</div>
          </div>
        </div>
        <div class="records-container-main" v-if="queueList.length">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
          >
            <div
              class="records-main-item"
              v-for="(item, index) in queueList"
              :key="index"
            >
              <div class="item-header">
                <div v-if="item.state != '1'">{{ item.stateDesc }}</div>
                <ul style="height: 12px;" v-if="item.state == '1'"></ul>
              </div>
              <div class="item-title">
                <div class="item-title-left">
                  <div class="item-header-icon" :class="{'active1':index == 0,'active2':index == 1,'active3':index == 2}">{{ index + 1 }}</div>
                  <div class="item-id">{{ item.callNo }}</div>
                  <div class="item-table">{{ item.mobile?item.mobile:'--' }}</div>
                </div>
                <div class="item-title-right" v-if="item.state == '1'">
                  <div class="item-call" @click="Oncall(item.code)">叫号</div>
                </div>
                
                
              </div>
              <div class="item-main">
                <div class="item-main-upper">
                  <div class="upper-left">等待时间：<span>分钟</span></div>
                  <div class="upper-right">就餐人数：<span>{{ item.peopleNum }}人</span></div>
                </div>
                <div class="item-main-below">
                  <div class="below-left">叫号次数：<span>{{ item.callNum }}次</span></div>
                  <div class="below-right">用户要求：<span style="color: #FFAA00;">{{ item.remark }}</span></div>
                </div>
              </div>
              <div class="item-btns" @click="footerBtn(item.code,item.mobile,item.peopleNum,index,$event)">
                <div class="item-btns-requery" data-id="2" v-if="item.state == '1'">置顶</div>
                <div class="item-btns-requery" data-id="1" v-if="item.mobile">拉黑</div>
                <div class="item-btns-requery" data-id="0" v-if="item.state == '1'">过号</div>
                <div class="item-btns-requery" data-id="3" v-if="item.state == '1'">入座</div>
                <div class="item-btns-requery" data-id="4" v-if="item.state == '2' || item.state == '3'">重排</div>
                <!-- <div class="item-btns-requery" data-id="5" v-if="">取消</div> -->
              </div>
            </div>
          </van-list>
        </div>
        <div v-else>
          <z-empty type="data"></z-empty>
        </div>
      </div>
  </page-wrap>
  <!-- 防误触提示 -->
  <z-popup v-model:show="touchShow" title="提示">
    <div class="popup-block" style="min-width: 300px">
      <div class="popup-block-main">
        <div class="popup-block-reason" style="text-align: center">
          {{ touchContent }}
        </div>
      </div>
      <div class="popup-block-footer">
        <z-button-group class="button-group">
          <z-button @click="touchShow = false" plain style="margin-right: 12px"
            >取消</z-button
          >
          <z-button @click="onConfirmTouch">确定</z-button>
        </z-button-group>
      </div>
    </div>
  </z-popup>
  <z-popup v-model:show="showBlock" title="加入黑名单">
    <div class="popup-block">
      <div class="popup-block-main">
        <div class="popup-block-reason">输入黑名单原因</div>

        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          placeholder="请输入"
        />
      </div>
      <div class="popup-block-footer">
        <z-button-group class="button-group">
          <z-button @click="onCancel" plain style="margin-right: 12px"
            >取消</z-button
          >
          <z-button @click="onSubmit">确定</z-button>
        </z-button-group>
      </div>
    </div>
  </z-popup>
  <audio :src="playIndex" style="width: 0; height: 0;" ref="audioBoxaa"></audio>
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { showToast } from 'vant';

import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

const queueList = ref([]) // 队列
const queueListBack = ref([]) // 队列备用
const sumShow = reactive({
  // 总计
  TableFour: 0,
  TableMore: 0,
  TableTwo: 0
})
//------------------------------------------------------时间筛选--------------------------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.beginTime = startTime
  postForm.endTime = endTime
  loadData(true)
}
//表单
const postForm = reactive({
  state: 3,
  beginTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})

//------------------------------------------------------头部自定义筛选（已入座、过号、统计）--------------------------------------------
const tabActive = ref(0)
const currentIndex = ref(1) // 请求回来的数组的第几个元素
const tabList = [
  {
    name: '已入座'
  },
  {
    name: '过号'
  },
  {
    name: '统计'
  }
]
const setActive = value => {
  switch (value.name) {
    case 0: // 已入座
      currentIndex.value = 1 // 已入座在数组的第1个元素
      postForm.state = 3
      postForm.beginTime = transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
      postForm.endTime = transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
      loadData(true)

      break
    case 1: // 过号
      currentIndex.value = 0 // 已入座在数组的第0个元素
      postForm.state = 2
      postForm.beginTime = transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
      postForm.endTime = transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
      loadData(true)

      break
    case 2: // 统计
      currentIndex.value = 2 // 已入座在数组的第2个元素
      postForm.state = ''
      loadData(true)
      break
  }
}
//------------------------------------------------------ 按钮 -------------------------------------------------------------------------
const touchShow = ref(false) // 防误触弹窗
let touchContent = ref('') // 防误触提示
let touchConfirm = ref('') // 确定判断
const btnPostForm = reactive({
  code: '',
  remark: '',
  state: '',
  roomCode: ''
})
const callCode = ref('')
const Oncall = value => {
  touchConfirm.value = '6'
  touchContent.value = '确认呼叫？'
  touchShow.value = true
  callCode.value = value
}
const footerBtn = (code, mobile,peopleNum,index,e) => {
  btnPostForm.code = code
  touchConfirm.value = e.target.dataset.id
  switch (e.target.dataset.id) {
    case '0':
      // 过号
      touchContent.value = '确认过号？'
      touchShow.value = true
      btnPostForm.state = '2'
      break
    // 黑名单
    case '1':
      showBlock.value = true
      mobileCode.value = mobile
      break
    // 置顶
    case '2':
      touchContent.value = '确认置顶？'
      touchShow.value = true
      break
    // 入座
    case '3':
      touchContent.value = '确认入座？'
      touchShow.value = true
      break
    // 重排
    case '4':
      touchContent.value = '确认重排？'
      touchShow.value = true
      break
    // 取消
    case '5':
      touchContent.value = '确认取消？'
      touchShow.value = true
      break
  }
}

// 确认操作
const onConfirmTouch = () => {
  console.log(touchConfirm.value);

  switch (touchConfirm.value) {
    case '0':
      // 过号
      const cancel = Api.Common.AppObjProcess.Do({
        functionName: 'queueState',
        contentData: btnPostForm
      }).then(res => {
        showToast('过号成功')
        touchShow.value = false
        loadData(true)
      })
      break
    case '1': // 拉黑
      showBlock.value = true
      mobileCode.value = mobile
      break
    case '2': // 置顶
      // 获取所有元素的 code 属性值并以逗号拼接成一个字符串
      // const codeString = lineList.value.map(item => item.code).join(',')
      Api.Common.AppObjProcess.Do({
        functionName: 'queueTop',
        contentData: btnPostForm
      }).then(res => {
        showToast('置顶成功')
        touchShow.value = false
        loadData(true)
      })
      break
    case '3': // 入座
      const Seating = Api.Common.AppObjProcess.Do({
        functionName: 'queueSeat',
        contentData: btnPostForm
      }).then(res => {
        showToast('入座成功')
        touchShow.value = false
        loadData(true)
      })
      break
    case '4': // 重排
      Api.Common.AppObjProcess.Do({
      functionName: 'queueEnabled',
      contentData: btnPostForm
      }).then(res => {
        showToast('重排成功')
        touchShow.value = false
        loadData(true)
      })
      break
    case '5': // 取消
      Api.Common.AppObjProcess.Do({
        functionName: 'QueueCancel',
        contentData: btnPostForm
      }).then(res => {
        showToast('取消成功')
        touchShow.value = false
        loadData(true)
      })
      break
    case '6':
      Api.Common.AppObjProcess.Do({
        functionName: 'queueCall',
        contentData: {code:callCode.value}
      }).then(res => {
        console.log(res);
        showToast('呼叫成功')
        touchShow.value = false
        QueueArray.value = res.callList
        callNum.value = res.callNum // 语音播放多少次
        playNum.value = 0
        paySound()
        canCall.value = false // 不能叫号
      })
      break
  }
}
// ---------------------------------------------- 叫号 ---------------------------------------------------------------------
const QueueArray = ref([]) // 语音播放数组
const QueueArrayBack = ref([]) // 语音播放数组备用
const audioBoxaa = ref(null)
const canCall = ref(true) // 是否还可以叫号（要保证两个叫号不能同时进行）
const callNum = ref('3') // 语音播放多少次
const callNumNow = ref('1') // 当前播放的次数
// 监听器 
watch(() => callNumNow.value, (newValue, oldValue) => {
  canCall.value = false // 不能取号
  if(newValue > callNum.value){
    canCall.value = true // 播放完毕 可以取号
    return
  }
  setTimeout(function() {
    QueueArray.value = QueueArrayBack.value.concat();
    paySound() 
    }, 3000); // 语音播报每一遍多少秒（最后一句话的时间要算进去）
  
});
// 语音播放
const playIndex = ref('')
const playNum = ref(0)
const paySound = () => {
    audioBoxaa.value.load()
    playIndex.value = QueueArray.value[playNum.value]
    console.log(playIndex.value,playNum.value)
    setTimeout(() => {
      audioBoxaa.value.play()
      playNum.value ++
      audioBoxaa.value.addEventListener('ended',paySound,false);
    }, 100);
}

//----------------------------------------------------拉黑---------------------------------------------------------------
const showBlock = ref(false)
// 拉黑做标记的电话
const mobileCode = ref('')
// 拉黑弹窗备注
const message = ref('')
// 拉黑弹窗的确定和取消
const onSubmit = () => {
  const block = Api.Common.AppObjProcess.Do({
    functionName: 'queueBlock',
    contentData: { mobile: mobileCode.value, remark: message.value, state: '1' }
  }).then(res => {
    showToast('拉黑成功')
  })

  showBlock.value = false
  message.value = ''
}
const onCancel = () => {
  message.value = ''
  showBlock.value = false
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    queueList.value = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'queueRecord',
    contentData: postForm
  })
  const nowList = resp.ListData
  const summary = resp.SummaryData
  console.log(nowList);
  if (refresh===true) {
        if (nowList.length!==postForm.pageSize) {
            finished.value = true
        }
    }
  sumShow.TableFour = summary.fourNumber // 总计4人桌
  sumShow.TableTwo = summary.twoNumber // 总计2人桌
  sumShow.TableMore = summary.moreNumber // 总计4人以上
  Array.prototype.push.apply(queueList.value, nowList)
  console.log(queueList.value);
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh===true) {
        initBs.value++
    }
}
//------------------------------------------------------获取初始数据------------------------------------------------------------------
const Init = () => {
  loadData(true)
}
Init()
</script>

<style scoped lang="scss">
.record-container {
  .container-main-title {
    line-height: 16px;
    font-size: 16px;
    color: #cccccc;
    border-bottom: 1px solid #383840;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 48px 0px 41px;
    .record-Seated {
      padding: 11px 15px;
    }
    .record-pass {
      padding: 11px 15px;
    }
    .record-recharge {
      padding: 11px 15px;
    }
    .active {
      font-size: 16px;
      line-height: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffaa00;
      position: relative;
    }
    .active::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 2px;
      background: #ffaa00;
    }
  }
  .records-container-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    .container-header-item {
      position: relative;
      background: #3d3d4c;
      border-radius: 4px;
      padding: 9px 17px 9px 18px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 14px;
      &.active {
        color: #ffffff;
        background: #ffaa00;
      }

      .header-select-icon {
        width: 10px;
        height: 100%;
        position: absolute;
        right: 4px;
        top: 0;
        background-image: url('@/assets/svg/open/v_open_triangle.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 10px 6px;
      }
    }
  }
  .records-container-time {
    display: flex;
    justify-content: space-between;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    padding: 0 12px;
    .container-time-item {
      background: #262626;
      border-radius: 4px;
      padding: 11px 18px 10px 18px;
      font-size: 12px;
      line-height: 12px;
    }
    .container-time-center {
      font-size: 12px;
      line-height: 12px;
      align-self: center;
    }
  }
  .records-container-all {
    display: flex;
    // justify-content: space-between;
    justify-content: space-evenly;
    align-items: center;
    margin: 0px 12px 10px;
    padding: 20px 0;
    background: rgba(40, 40, 46, 0.5);
    border: 1px solid rgba(63, 61, 66, 0.5);
    // opacity: 0.5;
    border-radius: 8px;
    .records-all-left {
      padding: 0 30px;
      border-right: 1px solid rgba(105, 103, 110, 0.5);
    }
    .records-all-center {
      padding: 0 30px;
      border-right: 1px solid rgba(105, 103, 110, 0.5);
    }
    .records-all-right {
      padding: 0 23px;
    }
    .all-item-upper {
      font-size: 14px;
      line-height: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffaa00;
      margin-bottom: 18px;
      text-align: center;
    }
    .all-item-below {
      font-size: 12px;
      line-height: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
    }
  }
  .records-container-main {
    padding: 0 12px;
    .records-main-item {
      background: #28282e;
      border-radius: 8px;
      padding: 0 0 12px 20px;
      margin-bottom: 10px;
      .item-header {
        display: flex;
        justify-content: flex-end;

        div {
          background: #383840;
          border-radius: 0px 8px 0px 8px;
          padding: 4px 12px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 13px;
        }
      }
      .item-title {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        justify-content: space-between;
        .item-title-left{
          display: flex;
          align-items: center;
          .item-header-icon{
            width: 20px;
            height: 20px;
            background: #393940;
            border-radius: 50%;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 20px;
            text-align: center;
            margin-right: 8px;
            &.active1{
              background: #FF6A00;
            }
            &.active2{
              background: #FFAA00;
            }
            &.active3{
              background: #FF9966;
            }
          }
            .item-id {
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 24px;
              margin-right: 12px;
            }
            .item-table {
              width: 100px;
              background: #3c3933;
              padding: 6px 7px;
              border-radius: 4px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffaa00;
              line-height: 13px;
            }
        }
        .item-title-right{
           .item-call{
            width: 60px;
            height: 30px;
            background: linear-gradient(0deg, #CCA67A 0%, #FFF4D9 100%);
            border-radius: 4px;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 12px;
            color: #260C04;
            text-align: center;
            line-height: 30px;
            margin-right: 20px
           }
        }
        
      }
      .item-main {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #CCCCCC;
        line-height: 14px;
        padding-top: 12px;
        border-top: 1px solid #383840;
        border-bottom: 1px solid #383840;
        margin-right: 20px;
        .item-main-upper{
          display: flex;
          align-items: center;
          padding-bottom: 12px;
          .upper-left{
            width: 50%;
          }
          .upper-right{
            
          }
        }
        .item-main-below{
          display: flex;
          align-items: center;
          padding-bottom: 12px;
          .below-left{
            width: 50%;
          }
          .below-right{
            
          }
        }
      
      }
      .item-btns{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 12px;
        padding-right: 20px;
        .item-btns-requery{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 14px;
          padding: 9px 22px;
          background: #5C5C66;
          border-radius: 4px;
          margin-left: 9px;
          white-space: nowrap;
        }
      }
    }
  }
}
.popup-block {
  .popup-block-main {
    padding: 20px 24px 10px 24px;
    .popup-block-reason {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
      margin-bottom: 9px;
    }
    ::v-deep(.van-field) {
      padding: 12px;
      width: 252px;
      height: 80px;
      background: #5c5c66;
      border-radius: 4px;
    }
    ::v-deep(.van-field__control) {
      color: #ffffff;
    }
  }
  .popup-block-footer {
    padding: 10px 24px 20px 24px;
    .button-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
